<template>
  <a-spin :spinning="spinning" >
    <a-card title="分类标签管理" >
      <template #extra >
        <a-button type="primary" @click="openAddModal({id: ''})" >新增一级分类</a-button>
      </template>
      <a-row :gutter="[8, 8]" >
        <a-col :span="7" v-for="item in categoryList" :key="item.id" >
          <a-card style="height: 400px;" :title="'一级分类名称： ' + item.name" >
            <a-empty v-if="item.children.length === 0" description="该分类下暂无子分类" ></a-empty>
            <div v-else >
              <a-row>
                <a-col v-for="(tag, index) in item.children" :key="tag.id" >
                  <a-tag
                    closable
                    :color="index + 1 > colors.length ? colors[Math.floor(Math.random() * colors.length)] : colors[index]"
                    @close.prevent="(e) => openDelModal(e, tag)"
                  >
                    {{tag.name}}
                  </a-tag>
                </a-col>
              </a-row>
            </div>
            <template #extra >
              <a-button type="primary" @click="openAddModal(item)" >新增子分类</a-button>
            </template>
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </a-spin>
  <a-modal
    title="确定要删除该分类吗?"
    :open="visible"
    @cancel="visible = false"
    @ok="ok"
  >
    <h2>注意：删除之后该分类下所有照片及其子分类都会被删除！</h2>
  </a-modal>

  <a-modal
    title="新增分类"
    :open="visibleChildren"
    @cancel="visibleChildren = false"
    @ok="submitCategory"
  >
    <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
      <a-form-item label="分类名称" v-bind="validateInfos.name">
        <a-input v-model:value="category.name" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup >
import { getCategoryList, delCategory, addCategory } from '@/api/index'
import { message, Form } from 'ant-design-vue'
import { onMounted, ref, reactive } from 'vue'

const useForm = Form.useForm

const categoryList = ref([])

const category = ref({ id: '', name: '', parentId: '' })

const visible = ref(false)

const visibleChildren = ref(false)

const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple']

const spinning = ref(false)

const { resetFields, validate, validateInfos } = useForm(category, reactive({
  name: [{ required: true, message: '哥们, 分类名称是必须得填的' }]
}))

const openAddModal = (record) => {
  resetFields({})
  visibleChildren.value = true
  category.value.parentId = String(record.id)
}

const openDelModal = (e, tag) => {
  visible.value = true
  category.value = tag
}

const closeModal = () => {
  visible.value = false
}

const submitCategory = () => {
  validate().then(async () => {
    await addCategory(category.value)
    message.success('新增成功')
    visibleChildren.value = false
    _getCategoryList()
  }).catch(e => e)
}

const ok = () => {
  delCategory(category.value.id).then(() => {
    message.success('删除成功')
    closeModal()
    _getCategoryList()
  })
}

const _getCategoryList = async () => {
  spinning.value = true
  const r = await getCategoryList()
  spinning.value = false
  categoryList.value = r.data
}

onMounted(() => {
  _getCategoryList()
})
</script>

<style lang="less" >
</style>
